<template>
    <div class="container">
        <div class="map-container" id="map-container"></div>
    </div>
</template>

<script setup>

import {onMounted, ref} from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import LocationIcon from "../../../assets/images/location.png";

const map = ref(null);
const props = defineProps(['lat', 'lon'])

onMounted(()=>{
    if (props.lat && props.lon){
        initMap().then(()=>{
            showMarker();
        });

    }
})


const showMarker = ()=>{
    let marker = new AMap.Marker({
        position: new AMap.LngLat(props.lon,  props.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        anchor: 'bottom-center',
        icon: new AMap.Icon({
            image: LocationIcon,
            size: [36, 36],
            imageSize: [36, 36],
        }),
    });
    map.value.add(marker)
}

//初始化地图
const initMap = () => {
    return new Promise((resolve, reject) => {
        AMapLoader.load({
            key: "9c4d1e3eb0c12d91bb25ccaae913615a",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap) => {
            map.value = new AMap.Map("map-container", {  //设置地图容器id
                viewMode: "3D",    //是否为3D地图模式
                zoom: 15,           //初始化地图级别
                center: [props.lon || 121.310626, props.lat || 31.915724], //初始化地图中心点位置
            });
            resolve();
        }).catch(e => {
            console.log(e);
        })
    })

}

</script>

<style scoped lang="scss">
.container{
    width: 100%;
    height: 100%;
    background: #1ab394;

    >.map-container{
        width: 100%;
        height: 100%;
    }
}
</style>
